<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            padding: 0px;
            margin:0px;
            transition: .3s;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-image: url(../../../public/img/OIP-C.jfif);
            background-size: cover;
        }
        .shell{
            width: 350px;
            padding: 40px;
            display: flex;
            align-items: center;
            flex-direction: column;
            background-color: #ffffff49;
            border-radius: 50px;
            box-shadow: 0 0 30px rgba(255,255,255,0.5) inset;
        }
        .title{
            font-size: 80px;
            margin-bottom: 30px;
            color: #fff;
            text-shadow: 0 0 10px #ff9dff80;

        }
        input[type="text"],
        input[type="password"]{
            width: 100%;
            height: 50px;
            margin: 10px 0;
            box-sizing: border-box;
            color:rgb(0,0,0);
            border:5px solid transparent;
            background:reba(255,255,255,.5);
            border-radius: 100px;
            padding: 5px 20px 0 20px;
            transition: 0.3s;
            font-size: 18px;
            outline: none;
        }
        input[type="text"]:hover,

        input[type="password"]:hover{
            background: rgba(255,255,255,0);
            border: 5px solid #fff;
        }
        input[type="submit"]{
            width: 100%;
            height: 50px;
            margin: 15px 0;
            padding:10px;
            color:#fff;
            border:none;
            background-color:#007bff;
            border-radius: 100px;
            
            transition: 0.3s;
            font-size: 20px;
            letter-spacing: 3px;
            cursor: pointer;
        }
        input::placeholder{
            color: #92A7E8;

        }
        .footer{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-top: 20px;
        }
        .Remember{
            opacity: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color:#7597ff;
            }
        input[type="checkbox"]{
                display: block;
                width: 25px;
                height: 25px;
                margin-right: 10px;
                background-color: #007bff;

            }
        #Password{
                border: none;
                background-color: #ffffff00;
                color:#7597ff;
                font-size: 18px;

            }

    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="shell">
        <h2 class="title">Login</h2>
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <input type="submit" value="Login" id="loginBtn">
        <div class="footer">
            <div class="Remember">
                <input type="checkbox" id="rememberME"> 
                <label for="rememberME">记住我</label>

            </div>
            <button id="Password">去注册</button>

        </div>
    </div>
</body>
</html>

<script>
    document.getElementById("Password").addEventListener('click',function(){
        var title=document.querySelector('.title');
        var loginBtn=document.getElementById('loginBtn');
        var rememberMELabel=document.querySelector('.Remember');
        var passwordBtn=document.getElementById('Password');
        if(title.innerText==='Login'){
            title.innerText='Register';
            loginBtn.value='Register';
            rememberMELabel.style.opacity='0';
            passwordBtn.innerText='去登录';
            document.getElementById('username').value='';
            document.getElementById('password').value='';
            document.getElementById('username').placeholder='New Username';
            document.getElementById('password').placeholder='New Password';
            document.getElementById('password').type='password';

        }else{
            title.innerText='Login';
            loginBtn.value='Login';
            rememberMELabel.style.opacity='1';
            passwordBtn.innerText="去注册";
            document.getElementById('username').placeholder='Username';
            document.getElementById('password').placeholder='Password';
            document.getElementById('password').type='password';
           
            
        }
        



    })


</script>
<script>
  import { reactive, ref } from 'vue';
  import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
  import axios from 'axios';
  import router from '@/router';
  
  export default {
    components: {
      ElForm,
      ElFormItem,
      ElInput,
      ElButton,
    },
    setup() {
      const ruleFormRef = ref(null);
      const ruleForm = reactive({
        name: '',
        password: '',
      });
      const isLogin = ref(true);
      const userlist = ref([]);
  
      const rules = {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度 3 到 10', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 8, message: '长度 3 到 8', trigger: 'blur' },
        ],
      };
  
      const mounted = () => {
        axios.get('users.json')
          .then(res => {
            userlist.value = res.data.userslist;
          })
          .catch(err => {
            console.error('请求用户数据出现错误：', err);
          });
      };
  
      const submitForm = async () => {
        if (!ruleFormRef.value) return;
        await ruleFormRef.value.validate((valid, fields) => {
          if (valid) {
            let flag = userlist.value.some(v => v.name === ruleForm.name && v.password === ruleForm.password);
            if (!flag) {
              alert('请输入正确的用户名和密码');
            } else {
              sessionStorage.setItem('username', ruleForm.name);
              router.push('/');
              console.log('submit!');
            }
          } else {
            console.log('error submit!', fields);
          }
        });
      };
  
      const toggleForm = () => {
        isLogin.value = !isLogin.value;
      };
  
      mounted();
  
      return {
        ruleFormRef,
        ruleForm,
        rules,
        submitForm,
        toggleForm,
        isLogin,
      };
    },
  };
</script>

<style scoped>
    .common-layout {
      background: url(../../../public/img/星空.png) no-repeat center;
      width: 100%;
      height: 100vh; /* 使用100vh确保高度占满整个视口 */
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .shell {
      width: 350px;
      padding: 40px 40px 40px 20px;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: #ffffff49;
      border-radius: 50px;
      box-shadow: 0 0 30px rgba(255, 255, 255, 0.5) inset;
      text-align: center; /* 使内容居中 */
      
    }
    .title {
      font-size: 24px;
      margin-bottom: 20px;
      color: #fff;
      text-shadow: 0 0 10px #ff9dff80;
    }
    
    .el-form-item {
      margin-bottom: 10px;
    }
    
    .el-input__inner {
      width: 100%;
      height: 50px;
      margin: 10px 0;
      box-sizing: border-box;
      color: rgb(0, 0, 0);
      border: 5px solid transparent;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 100px;
      padding: 0 20px;
      transition: 0.3s;
      font-size: 18px;
      outline: none;
    }
    
    .el-input__inner:hover {
      background: rgba(255, 255, 255, 0);
      border: 5px solid #fff;
    }
    
    .el-button {
      width: 100%;
      height: 50px;
      margin: 15px 0;
      color: #fff;
      border: none;
      background-color: #007bff;
      border-radius: 100px;
      transition: 0.3s;
      font-size: 20px;
      letter-spacing: 3px;
      cursor: pointer;
    }
    
    .el-button:hover {
      background-color: #0056b3;
    }
    
    input::placeholder {
      color: #92A7E8;
    }
    
    .footer {
      display: flex;
      justify-content: space-between; /* 修正按钮位置，使其在一行显示 */
      align-items: center;
      width: 100%;
      margin-top: 20px;
    }
    
    .Remember {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #7597ff;
    }
    
    input[type="checkbox"] {
      display: block;
      width: 25px;
      height: 25px;
      margin-right: 10px;
      background-color: #007bff;
    }
    
    .toggle-button {
      border: none;
      background-color: #ffffff00;
      color: #7597ff;
      font-size: 18px;
      cursor: pointer;
      transition: background-color 0.3s;
      padding: 5px 15px;
      border-radius: 5px;
      margin-left: auto;
    }
    
    .toggle-button:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
</style>
<style scoped>
  .common-layout {
    background: url(../../../public/img/星空.png) no-repeat center;
    width: 100%;
    height: 100vh;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .shell {
    width: 350px;
    padding: 40px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff81;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  }
  
  .title {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
  }
  
  .el-form-item {
    margin-bottom: 15px;
  }
  
  .el-input__inner {
    height: 40px;
    border-radius: 20px;
    border: 1px solid #ccc;
  }
  
  .el-input__inner:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  }
  
  .el-button {
    height: 40px;
    border-radius: 20px;
    background-color: #007bff;
    color: #fff;
  }
  
  .el-button:hover {
    background-color: #0056b3;
  }
  
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 20px;
  }
  
  
  input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
  
  button {
    border: none;
    background: none;
    color: #007bff;
    font-size: 14px;
    cursor: pointer;
  }
  
  button:cover {
  
    border: none;
    background: none;
    color: #007bff;
    font-size: 14px;
    cursor: pointer;
    margin-right: auto;
  }
</style>